<template>
	<view class="contain-main-box">
		<view class="setting">
			<navigator url="/pages/changeUrl/index">
				<u-icon name="setting" color="#eee" size="40"></u-icon>
			</navigator>
		</view>
		<u-toast ref="uToast" />
		<!-- 登录模块 -->
		<view class="login-main">
			<view class="ky-logo">
				<view class="logo-img">
					<template v-if="$store.state.appConfig.r3">
						<u-image
						width="100%"
						:src="$store.state.baseImg + '/img/tubiao/'+ $store.state.appConfig.r3"
						mode="widthFix"
						bg-color="rgba(0,0,0,0)">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</template>
					<template v-else>
						<u-image
						width="100%"
						:src="$store.state.baseImg + '/img/tubiao/'+ $store.state.appConfig.logoAddress"
						mode="widthFix"
						bg-color="rgba(0,0,0,0)">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</template>
				</view>
				<text class="title2">{{$store.state.appConfig.loginName}}</text>
			</view>
			
			<view class="main-card">
				<view class="form-box">
					<u-form :model="form" ref="uForm" >
						<u-form-item class="form-item" :border-bottom="false" prop="mobile">
							<view class="form-item-inner">
								<view class="icon ">
									<u-icon name="account" :color="kyMainColor" size="40"></u-icon>
								</view>
								<u-input v-model="form.mobile" maxlength='18' placeholder-style="color:#212c67" type="text" :height='inputH' :custom-style='customStyle' placeholder="输入用户名/手机号"/>
							</view>
						</u-form-item>
						<u-form-item class="form-item" :border-bottom="false" prop="passWord">
							<view class="form-item-inner">
								<view class="icon">
									
									<u-icon name="lock" :color="kyMainColor" size="40"></u-icon>
								</view>
								<u-input v-model="form.passWord" type="password" :placeholder-style="'color:'+kyMainColor" :height='inputH' :custom-style='customStyle' placeholder="输入密码"/>
							</view>
						</u-form-item>
					</u-form>
				</view>
				<view class="bottom-btn">
					<u-button type="primary" @click="login" :ripple="true" shape="circle" class="login-btn" :disabled="disabled" :loading="disabled">{{disabled?'正在登录':'登录'}}</u-button>
				</view>
			</view>
		</view>
		<u-modal v-model="modalShow" :content="content" :title-style="{
			color: '#ff9900'
		}"></u-modal>
		<view class="bottom-copyright">
			<u-divider :color="kyMainColor" half-width="190" :border-color="kyMainColor" bg-color="rgba(0,0,0,0)" margin-bottom="20">版权所有</u-divider>
			<view class="title">
				<text>{{$store.state.appConfig.copyright}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {isMobile} from "../../common/utils/index.js";
	export default{
		data(){
			return{
				appConfig:{},
				kyMainColor: getApp().globalData.kyMainColor,
				// showCode:true,
				modalShow: false,
				content: "",
				inputH: "90",
				customStyle:{
					"background-color":"#e8e9f0",
					"color":getApp().globalData.kyMainColor,
					"border-radius":"90rpx",
					"padding":"0 78rpx"
				},
				form:{
					mobile:"",
					passWord:"",
					// code:"" //验证码
				},
				rules:{
					mobile:[
					{ 
						validator:(rule, value, callback)=>{
							if(value == ""){
								callback(new Error('请输入用户名/手机号'))
								return false
							}
							// if(!isMobile(value)){
							// 	callback(new Error('请输入正确的手机号'))
							// 	return false
							// }
							callback()
						}, trigger: ['blur']}],
					passWord:[{ required: true, message: '请输入密码', trigger: ['blur'] }],
					code:[{required: true, message: '请输入验证码', trigger: ['blur']}]
				},
				disabled: false,
				isActive: 1
			}
		},
		onPullDownRefresh() {
			this.$store.dispatch('set_appConfigAction').then((res)=>{
				this.$refs.uToast.show({
					title: '更新成功',
					type: 'success',
					duration:1500
				})
				uni.stopPullDownRefresh()
			}).catch(()=>{
				uni.stopPullDownRefresh()
			})
		},
		methods:{
			login(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.disabled = true;
						this.$http.httpRequest({
							url: this.$api.login,
							data:this.form,
							methods:"post"
						}).then((res)=>{
							this.disabled = false
							if(!res){
								return uni.showToast({
									title: "服务器请求出错",
									icon:"none"
								})
							}
							if(res.data.code !== 200){
								this.content = res.data.mess;
								this.modalShow = true;
								return 
							}
							this.$store.commit("set_token",res.data.tokenData);
							// return
							uni.switchTab({
								url:"/pages/viewPort/index"
							})
						}).catch((err)=>{
							this.disabled = false
						})
					} else {
					}
				});
				
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
$logo-color:#fefefe;
.contain-main-box{
	padding-top: calc( var(--status-bar-height) + 80rpx );
	position: relative;
	min-height: 100vh;
	padding-bottom: 175rpx;
	position: relative;
	.setting{
		position: absolute;
		top:calc( var(--status-bar-height) + 40rpx ) ;
		right: 30rpx;
	}
	.bottom-copyright{
		width: 100%;
		height: 145rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		.title{
			text-align: center;
			text{
				font-size: 30rpx;
				color: $ky-main-color;
			}
		}
	}
}
.ky-logo{
	text-align: center;
	margin-bottom: 50rpx;
	.logo-img{
		width: 70%;
		min-height: 60rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
	.title{
		color: $logo-color;
		font-size: 71rpx;
		font-weight: bolder;
		margin-bottom: 16rpx;
	}
	.login-loading{
		margin-bottom: 75rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		text{
			display: inline-block;
			width: 25rpx;
			height: 25rpx;
			background-color: #FFFFFF;
			margin: 0 12rpx;
		}
		.active{
			width: 40rpx;
			height: 40rpx;
			background-color: #f08519;
		}
	}
	.title2{
		color: #eee;
		font-size: 62rpx;
	}
}
.login-main{
	.main-card{
		background-color: #f9f9f9;
		padding: 132rpx 25rpx 150rpx 25rpx;
		width: $baseWidth;
		box-shadow: 0 0 60rpx rgba(0,0,0,0.3);
		border-radius: $card-box-radius;
		margin: 0 auto;
		position: relative;
		z-index: 12;
		.form-item{
			padding: 0;
			margin-bottom: 36rpx;
			.form-item-inner{
				position: relative;
				width: 100%;
				.icon{
					position: absolute;
					left: 25rpx;
					top: 50%;
					transform: translateY(-50%);
					z-index: 20;
					display: inline-block;
					font-size: 40rpx;
				}
				.icon-phone{
					width: 27rpx;
					height: 43rpx;
					background-image: url('/static/icon/login-icon/icon-phone.png');
					background-repeat: no-repeat;
					background-size: cover;
				}
				.icon-password{
					width: 31rpx;
					height: 35rpx;
					background-image: url('/static/icon/login-icon/icon-code.png');
					background-repeat: no-repeat;
					background-size: cover;
				}
				.icon-code{
					width: 31rpx;
					height: 39rpx;
					background-image: url('/static/icon/login-icon/icon-yzm.png');
					background-repeat: no-repeat;
					background-size: cover;
				}
			}
		}
		.form-item:last-child{
			margin-bottom: 75rpx;
		}
		.bottom-btn{
			.login-btn{
				background-color: $ky-main-color;
				font-size: 32rpx;
				height: 90rpx;
			}
		}
	}
}
</style>
